"use client"

import type React from "react"
import {useEffect, useState} from "react"
import {Button} from "@/components/ui/button"
import {Input} from "@/components/ui/input"
import {Label} from "@/components/ui/label"
import {Loader2} from "lucide-react"

export function PhoneLoginForm() {
    const [loading, setLoading] = useState(false)
    const [countdown, setCountdown] = useState(0)
    const [formData, setFormData] = useState({
        phone: "",
        code: "",
    })

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const {name, value} = e.target
        setFormData((prev) => ({...prev, [name]: value}))
    }

    const handleSendCode = async () => {
        if (!formData.phone || formData.phone.length < 11) {
            alert("请输入有效的手机号码")
            return
        }

        setCountdown(60)
        // Simulate API call to send verification code
        console.log("Sending code to:", formData.phone)
        // Here you would typically call your SMS API
    }

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        setLoading(true)

        // Simulate API call
        try {
            await new Promise((resolve) => setTimeout(resolve, 1500))
            console.log("Login with phone:", formData)
            // Here you would typically verify the code and authenticate the user
        } catch (error) {
            console.error("Login failed:", error)
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        if (countdown > 0) {
            const timer = setTimeout(() => setCountdown(countdown - 1), 1000)
            return () => clearTimeout(timer)
        }
    }, [countdown])

    return (
        <form onSubmit={handleSubmit} className="space-y-4 py-4">
            <div className="space-y-2">
                <Label htmlFor="phone">手机号码</Label>
                <Input
                    id="phone"
                    name="phone"
                    type="tel"
                    placeholder="请输入手机号码"
                    required
                    value={formData.phone}
                    onChange={handleChange}
                    maxLength={11}
                />
            </div>

            <div className="space-y-2">
                <Label htmlFor="code">验证码</Label>
                <div className="flex space-x-2">
                    <Input
                        id="code"
                        name="code"
                        placeholder="请输入验证码"
                        required
                        value={formData.code}
                        onChange={handleChange}
                        maxLength={6}
                    />
                    <Button
                        type="button"
                        variant="outline"
                        className="whitespace-nowrap"
                        onClick={handleSendCode}
                        disabled={countdown > 0}
                    >
                        {countdown > 0 ? `${countdown}秒后重发` : "获取验证码"}
                    </Button>
                </div>
            </div>

            <Button type="submit" className="w-full" disabled={loading}>
                {loading ? (
                    <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin"/>
                        登录中...
                    </>
                ) : (
                    "登录"
                )}
            </Button>
        </form>
    )
}
